<template>
  <div class="selfCell" :style="{'width':boxWidth,'height':boxHeight,'grid-template-columns':generateGridColumns(boxNumber)}">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  boxWidth: {
    type: String,
    default: '100%'
  },
  boxHeight: {
    type: String,
    default: '100%'
  },
  boxNumber: {
    type: Number,
    default: 4
  }
})
const generateGridColumns = (number: number) => {
  const columnsNumber = Math.ceil(Math.sqrt(number))
  return `repeat(${columnsNumber},1fr)`
}
</script>

<style scoped lang="scss">

.selfCell {
  display: grid;
  grid-gap: 3.9rpx;
}
</style>
